<template>
    <el-dialog append-to-body :close-on-click-modal="false" :close-on-press-escape="false" custom-class='form-dialog' destroy-on-close :title="title" :visible.sync="visible" width="50%" @close="close">
        <div class='com-form-dialog'>
            <el-form ref="form" label-width="100px" :model="form" :rules="rules">
    <#list table.columns as column>
        <#if column.columnName !="Id" && column.columnName != "RemoveTag" && column.columnName != "Creator" && column.columnName != "CreateTime" && column.columnName != "Updater" && column.columnName != "UpdateTime">
            <#if column.sqlTypeName == "VARCHAR" && (column.remarks?contains("："))>
                <el-form-item label="${column.remarks?substring(0,column.remarks?index_of("："))}" prop="${column.columnNameFirstLower}">
                    <el-select v-model="form.${column.columnNameFirstLower}" placeholder="请选择${column.remarks?substring(0,column.remarks?index_of("："))}" style="width: 100%">
                        <el-option v-for="(item, index) in dict['${column.columnNameFirstLower}']" :key="index" :label="item.name" :value="item.value" />
                    </el-select>
                </el-form-item>
            <#elseif column.sqlTypeName == "VARCHAR" && (column.size?eval >= 3000)>
                <el-form-item label="${column.remarks}" prop="${column.columnNameFirstLower}">
                    <el-input v-model="form.${column.columnNameFirstLower}" maxlength="${column.size?eval/3}" placeholder="请输入${column.remarks}" rows="5" type="textarea" />
                </el-form-item>
            <#elseif column.sqlTypeName == "VARCHAR" && (column.size?eval > 36)>
                <el-form-item label="${column.remarks}" prop="${column.columnNameFirstLower}">
                    <el-input v-model="form.${column.columnNameFirstLower}" maxlength="${column.size?eval/3}" placeholder="请输入${column.remarks}" />
                </el-form-item>
            <#elseif column.sqlTypeName == "DATE">
                <el-form-item label="${column.remarks}" prop="${column.columnNameFirstLower}">
                    <el-date-picker v-model="form.${column.columnNameFirstLower}" placeholder="请选择${column.remarks}" style='width:100%' type="date"  />
                </el-form-item>
            <#elseif column.remarks == "排序" && column.columnNameFirstLower == "orderNum">
                <el-form-item label="${column.remarks}" prop="${column.columnNameFirstLower}">
                    <el-input-number v-model="form.orderNum" controls-position="right" :max="99999999999" :min="1" placeholder="请输入排序" :precision="0" style="width: 100%" />
                </el-form-item>
            <#else>
                <el-form-item label="${column.remarks}" prop="${column.columnNameFirstLower}">
                    <el-input v-model="form.${column.columnNameFirstLower}" maxlength="${column.size?eval}" placeholder="请输入${column.remarks}" />
                </el-form-item>
            </#if>
        </#if>
    </#list>
            </el-form>
        </div>
        <div slot="footer" class="dialog-footer" style="text-align: center;">
            <el-button @click="close">取 消</el-button>
            <el-button :loading="loading" type="primary" @click="save">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { findOne, add, update } from '@/api/${moduleName}/${functionName}';
    import { isBlank } from '@/utils/validate';

    export default {
        name: '${functionName?cap_first}Form',
        props: {
            dict: {
                type: Object,
                default: () => {}
            }
        },
        data() {
            return {
                title: '',
                visible: false,
                isAdd: false,
                loading: false,
                form: {},
                rules: {
        <#list table.columns as column>
            <#if column.columnName !="Id" && column.columnName != "RemoveTag" && column.columnName != "Creator" && column.columnName != "CreateTime" && column.columnName != "Updater" && column.columnName != "UpdateTime">
                <#if column.sqlTypeName == "VARCHAR" && (column.remarks?contains("："))>
                    ${column.columnNameFirstLower}: [{ required: true, trigger: 'change', message: '请选择${column.remarks?substring(0,column.remarks?index_of("："))}' }],
                <#else>
                    ${column.columnNameFirstLower}: [{ required: true, trigger: 'blur', message: '请输入${column.remarks}' }],
                </#if>
            </#if>
        </#list>
                }
            };
        },
        methods: {
            show(data) {
                this.visible = true;
                if (isBlank(data)) {
                    this.title = '添加';
                    this.isAdd = true;
                } else {
                    this.title = '编辑';
                    this.isAdd = false;
                    findOne({ id: data.id }).then((res) => {
                        this.form = Object.assign({}, res.data);
                    });
                }
            },
            close() {
                this.$refs.form.resetFields();
                this.form = this.$options.data().form;
                this.visible = false;
                this.loading = false;
            },
            save() {
                this.$refs.form.validate(async (valid) => {
                    if (valid) {
                        this.loading = true;
                        if (this.isAdd) {
                            await add(this.form)
                                .then((res) => {
                                    this.$baseMessageSuccess(res.msg);
                                    this.$emit('refresh');
                                    this.close();
                                })
                                .finally(() => {
                                    this.loading = false;
                                });
                        } else {
                            await update(this.form)
                                .then((res) => {
                                    this.$baseMessageSuccess(res.msg);
                                    this.$emit('refresh');
                                    this.close();
                                })
                                .finally(() => {
                                    this.loading = false;
                                });
                        }
                    }
                });
            }
        }
    };
</script>
